<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0
        }
        .iphone{
            position:relative;
            margin:100px auto;
            width:600px;
            height:300px;
            /*background:red;*/
        }
        .content{
            width:100%;
            height:100%;
            background: white;
            border:10px solid #000;
            border-radius:30px;
            overflow-x:hidden ;
            overflow-y: scroll;
            font-size: 16px;
            font-weight: bold;
        }
        .camera{
            width:6%;
            height:60%;
            background: black;
            position: absolute;
            top:20%;
            border-radius: 0 30px  30px 0;
        }
        li{
            list-style: none;
            border-bottom:1px solid #ccc;
        }
        ul{
            padding-left: 10px;
        }
        *::-webkit-scrollbar{
            padding-left: 40px;
        }
    </style>
</head>
<body>
<div class="iphone">
    <div class="content">
        <ul>
            <li>qwe</li>
            <li>qwe</li>
            <li>dsf</li>
            <li>dsf</li>
            <li>dfsd</li>
            <li>vfxdgbfh</li>
            <li>vcfgdddddddd</li>
            <li>vbffbc</li>
            <li>cfbggbvc</li>
            <li>ggfdcbcff</li>
            <li>vcfgdddddddd</li>
            <li>qwe</li>
            <li>qwe</li>
            <li>dsf</li>
            <li>dsf</li>
            <li>dfsd</li>
            <li>vfxdgbfh</li>
            <li>vcfgdddddddd</li>
            <li>vbffbc</li>
            <li>cfbggbvc</li>
            <li>ggfdcbcff</li>
            <li>vcfgdddddddd</li>
            <li>vbffbc</li>
            <li>cfbggbvc</li>
            <li>ggfdcbcff</li>
        </ul>
    </div>
    <div class="camera"></div>
</div>
<script>
    var liList = document.getElementsByTagName("li");
    var cameraRect = document.querySelector(".camera").getBoundingClientRect();
    var liOffset = 45;
    var thresh = 32;

    document.querySelector(".content").onscroll = moveLi;
    function moveLi(){
        for(var liNow of liList){
            var liItemRect = liNow.getBoundingClientRect();
            var disFromTop = liItemRect.bottom - cameraRect.top;
            var disFromBottom = liItemRect.bottom - cameraRect.bottom;
            if(Math.abs(disFromTop)<thresh){
                liNow.style.transform = "translateX("+lerp(0,liOffset,cal(disFromTop,thresh))+"px)";
            }else if(disFromTop>0 && Math.abs(disFromTop) >thresh&&disFromBottom<0){
                liNow.style.transform = "translateX("+liOffset+"px)";
            }else if(Math.abs(disFromBottom)<thresh){
                liNow.style.transform = "translateX("+lerp(liOffset,0,cal(disFromBottom,thresh))+"px)";
            }else{
                liNow.style.transform = "translateX(0))";
            }
        }
    }
    function cal(dis,thr){
        return (dis+thr)/(thr*2);
    }
    function lerp(p0,p1,t){
        return(p1-p0)*t+p0;
    }
    moveLi()
</script>
</body>
</html>